<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>生日快乐，{{ birth_name }}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}" />
  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon" />
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> -->
  {% include 'base.html' %}
</head>
<body>
    <div class="starry-bg"></div> <!-- 🌟 背景星星 -->
  <div class="home-container">
    <h1 id="birth-name" style="cursor: pointer;">🎂 亲爱的{{ birth_name }}，生日快乐 🎉</h1>
    <p>你是我生命中最闪耀的星星 ✨</p>
    
    <!-- 倒计时 -->
    <div id="countdown">
        <h2 id="countdown-title">距离下次生日还有</h2>
        <p id="timer">00天 00时 00分 00秒</p>
    </div>

    <!-- 情话 -->
    <button id="love-button" class="love-button">点我一下 ❤</button>
    <div id="love-message" class="love-message">你是我生命中最美的遇见</div>

    <!-- 蛋糕 -->
    <div class="cake-container">
        <div class="cake-tip">吹蜡烛许愿</div>
        <svg class="cake-svg" viewBox="0 0 200 200">
            <!-- 蛋糕盘 -->
            <ellipse cx="100" cy="180" rx="90" ry="15" fill="#f8f8f8" filter="url(#shadow)"/>
            
            <!-- 三层蛋糕 -->
            <rect x="20" y="120" width="160" height="60" rx="10" fill="url(#cake-gradient)"/>
            <rect x="35" y="80" width="130" height="50" rx="10" fill="url(#cake-gradient)"/>
            <rect x="50" y="50" width="100" height="40" rx="10" fill="url(#cake-gradient)"/>
            
            <!-- 奶油装饰 -->
            <path d="M20 120 Q30 110 40 120 T80 120 T120 120 T160 120 T180 110" 
                  fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
            
            <!-- 蜡烛 -->
            <rect x="96" y="30" width="8" height="30" fill="url(#candle-gradient)"/>
            <path class="flame" d="M100,30 C106,15 109,10 100,5 C91,10 94,15 100,30" 
                  fill="url(#flame-gradient)" onclick="extinguishFlame()"/>
            
            <!-- 定义渐变和阴影 -->
            <defs>
                <linearGradient id="cake-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#f9c5d1"/>
                    <stop offset="100%" stop-color="#f2789f"/>
                </linearGradient>
                <linearGradient id="candle-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#ff9a9e"/>
                    <stop offset="100%" stop-color="#fad0c4"/>
                </linearGradient>
                <radialGradient id="flame-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                    <stop offset="0%" stop-color="#ffde7d"/>
                    <stop offset="70%" stop-color="#ff9e7d" stop-opacity="0.8"/>
                    <stop offset="100%" stop-color="#ff9e7d" stop-opacity="0"/>
                </radialGradient>
                <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                    <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="rgba(0,0,0,0.1)"/>
                </filter>
            </defs>
        </svg>
    </div>
    </div>
    {% include 'audio.html' %}
    <script src="{{ url_for('static', filename='scripts/script.js') }}"></script>
</body>
</html>
